<template>
  <div ref="wrap" style="height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: ["options", "data", "type"],
  name: "echarts",
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(this.$refs.wrap);
    this.myChart.setOption(this.options);
    this.myChart.setOption({
      series: [
        {
          name: "销量",
          type: this.type,
          data: this.data,
        },
      ],
    });
  },
  watch: {
    data(val) {
      this.myChart.setOption({
        series: [
          {
            name: "销量",
            type: this.type,
            data: val,
          },
        ],
      });
    },
  },
  beforeUnmount() {
    if (this.myChart) {
      this.myChart.dispose();
      this.myChart = null;
    }
  },
};
</script>
